<template>
  <div class="card">
    <div class="container">
      <div class="line-div" v-for="(item,sindex) in dataList" :key="item+sindex">
        <span v-for="(cell,cindex) in item.nodes" :key="cell+cindex">
          <link-blank v-if="cell==' '"/>
          <link-line v-if="cell=='|'"/>
          <link-extend v-if="cell=='L'"/>
          <link-cross v-if="cell=='+'"/>
          <navigator :url="'/pages/equip/desc/main?id='+item.id" style="display:inline">
          <span @click="handleClick(item)"><wdata v-if="cell=='D'" :data="item" :shark="isShark"/></span>
           </navigator>
        </span>
      </div>

    </div>
  </div>
</template>
<script>
import {transWeaponGui} from '@/util'
import linkCross from '@/components/weapon/LinkCross'
import linkExtend from '@/components/weapon/LinkExtend'
import linkLine from '@/components/weapon/LinkLine'
import linkBlank from '@/components/weapon/LinkBlank'
import wdata from '@/components/weapon/Wdata'
export default {
  props: [
    'data',
    'shark'
  ],
  data () {
    return {
      isShark: false,
      dataList: []
    }
  },
  components: {
    linkCross,
    linkExtend,
    linkLine,
    linkBlank,
    wdata
  },
  mounted () {
    this.dataList = this.data
    transWeaponGui(this.dataList)
  },
  methods: {
    handleClick (item) {
      console.log('click weapon', item)
    }
  },
  watch: {
    data: function (newQuestion, oldQuestion) {
      this.dataList = this.data
      transWeaponGui(this.dataList)
    },
    shark: function (newVal, oldVal) {
      this.isShark = newVal
    }
  }
}
</script>
<style>
.box {
  width: 30px;
  height: 36px;
  vertical-align: top;
  display:inline-block;
}
.box-item{
  width:50%;
  height:50%;
  float:left;
  box-sizing: border-box;
}
.border-bottom{
  border-bottom:3px solid #233142;
}
.border-right{
  border-right:3px solid #233142;
}
.border-top{
  border-top:3px solid #233142;
}
.line-div{
  background-color: #ffffff;
  padding: 0;
  margin: 0;
  white-space:nowrap;
}
.box-data{
  height: 36px;
  margin-left: 10px;
  line-height: 36px;
  width: auto;
  vertical-align: top;
}
.container{
  overflow: auto;
}
.weapon-info{
  margin: 5px;
  font-size: 12px;
  background: #233142;
  color: #ffffff;
  border-radius: 10px;
  padding: 5px;
}
</style>


